<template>
  <div class="filter-container">
    <el-card>
      <div class="filter-item" v-for="(filter, index) in filters" :key="index">
        <div class="filter-title">{{ filter.title }}</div>
        <div class="filter-options">
          <el-checkbox-group v-model="filter.selected">
            <el-checkbox 
              v-for="option in filter.options" 
              :key="option.value"
              :label="option.value"
            >
              {{ option.label }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const emit = defineEmits(['update:filters'])

const filters = ref([
  {
    title: '类别',
    options: [
      { label: '类别1', value: 'category1' },
      { label: '类别2', value: 'category2' },
      { label: '类别3', value: 'category3' }
    ],
    selected: []
  },
  {
    title: '状态',
    options: [
      { label: '状态1', value: 'status1' },
      { label: '状态2', value: 'status2' },
      { label: '状态3', value: 'status3' }
    ],
    selected: []
  }
])

const applyFilters = () => {
  const selectedFilters = {}
  filters.value.forEach(filter => {
    selectedFilters[filter.title] = filter.selected
  })
  emit('update:filters', selectedFilters)
}

const resetFilters = () => {
  filters.value.forEach(filter => {
    filter.selected = []
  })
  applyFilters()
}

// Expose these methods to parent component
defineExpose({
  applyFilters,
  resetFilters
})
</script>

<style scoped>
.filter-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.filter-item {
  margin-bottom: 15px;
}

.filter-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
</style>
